<template>
	<view class="container" v-if="toLogin">
		<view class="login-title">
			验证码登录
		</view>
		<view class="input-area">
			<view class="input-box">
				<input placeholder="请输入手机号" v-model="mobile" type="number" maxlength="11" />
			</view>
			<view class="">

			</view>
		</view>
		<view class="input-area">
			<view class="input-box">
				<input placeholder="请输入验证码" v-model="yanzheng" type="number" maxlength="4" />
			</view>
			<view class="yanzheng-text">
				<text v-if="yanzhengSec === 0" @click="getYanzheng">获取验证码</text>
				<text v-else style="color:#999;">获取验证码({{yanzhengSec}}s)</text>
			</view>
		</view>
		<view class="login-btn" :style="yanzheng.length == 4 ? 'opacity:1;' : ''" @click="login">
			登录
		</view>
	</view>
	<view class="container" v-else>
		<view class="login-title">
			<view>修改手机号</view>
			<view class="user-original-mobile">{{originalMobile}}</view>
		</view>
		<view class="input-area">
			<view class="input-box">
				<input placeholder="请输入新手机号" v-model="mobile" type="number" maxlength="11" />
			</view>
			<view class="">

			</view>
		</view>
		<view class="input-area">
			<view class="input-box">
				<input placeholder="请输入验证码" v-model="yanzheng" type="number" maxlength="4" />
			</view>
			<view class="yanzheng-text">
				<text v-if="yanzhengSec === 0" @click="getYanzheng">获取验证码</text>
				<text v-else style="color:#999;">获取验证码({{yanzhengSec}}s)</text>
			</view>
		</view>
		<view class="login-btn" :style="yanzheng.length == 4 ? 'opacity:1;' : ''" @click="changeMobile">
			提交
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				mobile: '',
				yanzheng: '',
				yanzhengSec: 0,
				originalMobile: '155****3579',
				toLogin: true
			};
		},
		onLoad(options) {
			let originalMobile = options.mobile
			if (originalMobile) {
				this.origin_mobile = originalMobile
				this.originalMobile = originalMobile.slice(0, 3) + '****' + originalMobile.slice(7, 11)
				this.toLogin = false
			}
		},
		methods: {
			getYanzheng(e) {
				const app = getApp()
				let _this = this
				if (this.mobile.length !== 11) {
					return uni.showToast({
						title: '请输入手机号',
						icon: 'error',
						duration: 1000
					})
				}
				this.yanzhengSec = 15
				uni.request({
					url: app.globalData.baseUrl + '/api/sendPhoneCode',
					method: 'POST',
					data: {
						mobile: this.mobile,
						code_type: 2
					},
					success: (res) => {
						uni.showToast({
							title: '已发送',
							icon: 'success',
							duration: 1000
						})
						console.log(res)
					},
					fail: (error) => {
						console.log(error)
					},
					complete(){
						//console.log('进入完成')
						let timer = setInterval(() => {
							_this.yanzhengSec -= 1
							if (_this.yanzhengSec === 0) {
								clearInterval(timer)
							}
						}, 1000)
					}
				})
				
			},
			login() {
				const app = getApp()
				if (this.yanzheng.length !== 4 || this.mobile.length !== 11) {
					return
				}
				uni.request({
					url: app.globalData.baseUrl + '/api/phoneCodeLogin',
					method: 'POST',
					data: {
						mobile: this.mobile,
						code: this.yanzheng
					},
					success: (res) => {
						let result = res.data
						if (result.statusCode !== 0) {
							return uni.showToast({
								title: result.msg,
								icon: 'error',
								duration: 1000
							})
						}

						uni.setStorageSync('loginInfo', result.data)
						uni.setStorageSync('isLogin', true)
						uni.setStorageSync('cookie', res.cookies[0])
						uni.setStorageSync('token', result.data.token)
						uni.navigateBack()
					},
					fail: (res) => {
						uni.showToast({
							title: '验证失败',
						})
					}
				})
			},
			changeMobile() {
				const app = getApp()
				if (this.yanzheng.length !== 4 || this.mobile.length !== 11) {
					return
				}
				uni.request({
					url: app.globalData.baseUrl + '/api/editSaleUserInfo',
					method: 'POST',
					header: {
						'token': uni.getStorageSync('token'),
						'Cookie': uni.getStorageSync('cookie')
					},
					data: {
						mobile: this.mobile,
						code: this.yanzheng,
						origin_mobile: this.origin_mobile
					},
					success: (res) => {
						let result = res.data
						if (result.statusCode !== 0) {
							return uni.showToast({
								title: result.msg,
								icon: 'error',
								duration: 1000
							})
						}

						uni.setStorageSync('isLogin', false)

						uni.navigateBack({
							delta: 2
						})
					},
					fail: (res) => {
						uni.showToast({
							title: '验证失败',
						})
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.container {
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		padding: 120rpx 40rpx;
	}

	.login-title {
		font-size: 45rpx;
		font-weight: 550;
		box-sizing: border-box;
		padding: 80rpx 0;
		letter-spacing: 5rpx;
	}

	.input-area {
		display: flex;
		flex: 2 1;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #eee;
	}

	.yanzheng-text {
		color: red;
		font-size: 28rpx;
	}

	.login-btn {
		margin-top: 70rpx;
		padding: 20rpx 0;
		text-align: center;
		color: #fff;
		border-radius: 50rpx;
		background-color: #F6736E;
		opacity: 0.8;
	}

	.user-original-mobile {
		letter-spacing: 0;
		margin-top: 20rpx;
	}
</style>
